<template>
  <a-list itemLayout="horizontal">
    <a-list-item>
      <a-list-item-meta>
        <template v-slot:title>
          <a>{{ $t('user.verification-code.required111566110577204') }}</a>
        </template>
        <template v-slot:description>
          <span>{{ $t( 'user.verification-code.required111566110577205') }}</span>
        </template>
      </a-list-item-meta>
      <template v-slot:actions>
        <a-switch
          :checkedChildren="$t('user.verification-code.required111566110577206')"
          :unCheckedChildren="$t('user.verification-code.required111566110577207')"
          :defaultChecked="navTheme === 'dark' && true || false"
          @change="onChange"
        />
      </template>
    </a-list-item>
    <a-list-item>
      <a-list-item-meta>
        <template v-slot:title>
          <a>{{ $t('user.verification-code.required111566110577208') }}</a>
        </template>
      </a-list-item-meta>
    </a-list-item>
  </a-list>
</template>
<script>
import { baseMixin } from '@/mixins/app-mixin'
import { NAV_THEME, TOGGLE_NAV_THEME } from '@/store/mutation-types'

const themeMap = {
  dark: this.$t($t('user.verification-code.required111566110577206')),
  light: this.$t($t('user.verification-code.required111566110577207')),
}

export default {
  mixins: [baseMixin],
  data() {
    return {}
  },
  filters: {
    themeFilter(theme) {
      return themeMap[theme]
    },
  },
  methods: {
    onChange(checked) {
      if (checked) {
        this.$store.commit(TOGGLE_NAV_THEME, NAV_THEME.DARK)
      } else {
        this.$store.commit(TOGGLE_NAV_THEME, NAV_THEME.LIGHT)
      }
    },
  },
}
</script>
